<script setup lang="ts">
import { useHistoryStore } from '@/stores/history'
import { computed } from 'vue'

const historyStore = useHistoryStore()

// 计算统计数据
const stats = computed(() => {
  const history = historyStore.history
  return {
    totalOperations: history.length,
    updates: history.filter(h => h.type === 'update').length,
    submits: history.filter(h => h.type === 'submit').length,
    lastOperation: history[0]?.time || '无'
  }
})
</script>

<template>
  <div class="nes-container with-title stats-panel">
    <h3 class="title">操作统计</h3>
    <div class="stats-grid">
      <div class="stat-item">
        <i class="nes-icon star is-small"></i>
        <div class="stat-content">
          <span class="stat-label">总操作次数</span>
          <span class="stat-value">{{ stats.totalOperations }}</span>
        </div>
      </div>
      
      <div class="stat-item">
        <i class="nes-icon coin is-small"></i>
        <div class="stat-content">
          <span class="stat-label">更新次数</span>
          <span class="stat-value">{{ stats.updates }}</span>
        </div>
      </div>
      
      <div class="stat-item">
        <i class="nes-icon trophy is-small"></i>
        <div class="stat-content">
          <span class="stat-label">提交次数</span>
          <span class="stat-value">{{ stats.submits }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stats-panel {
  margin-top: 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.05);
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 var(--border-color);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-color);
}

.stat-value {
  font-size: 1.2rem;
  color: var(--primary-color);
  font-weight: bold;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style> 